<script setup lang="ts">
import { useUpdateCalcRule } from '@fl/api/purchase'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { Editor } from '@fl/origin-components/Editor/index'
import { cloneDeep } from 'lodash-es'

import { PRICING_PRODUCT_STATUS_MAP } from '../goods-management/constant'

const props = defineProps<{
    detailData: {
        calcRule: string
        categoryId: string
        categoryName: string
        explanation: string
        priceProId: string
        productId: string
        productName: string
        specs: string
        status: number
    }
}>()
const emit = defineEmits<{
    publish: []
}>()

const { createMessage } = useMessage()
const router = useRouter()

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const { isPending: isUpdateCalcRulePending, mutate: updateCalcRule } = useUpdateCalcRule()

const isSubmitLoading = computed(() => isUpdateCalcRulePending.value)
const isNotPublished = computed(() => props.detailData.status === PRICING_PRODUCT_STATUS_MAP.NOT_PUBLISHED)

// #region UI Listener
function onPublishBtnClick() {
    onSaveBtnClick(true)
}

function onSaveBtnClick(publishOnSuccess: boolean = false) {
    const params = { ...state.value }

    updateCalcRule(
        params,
        {
            onSuccess: () => {
                if (publishOnSuccess) {
                    emit('publish')
                }
                else {
                    createMessage.success('保存成功')
                }
            },
        },
    )
}

function onCancelBtnClick() {
    router.back()
}
// #endregion

watchEffect(() => {
    Object.assign(state.value, {
        calcRule: props.detailData.calcRule,
        productId: props.detailData.productId,
    })
})

const data = computed(() => ({ }))

defineExpose({
    data,
})
</script>

<template>
    <div class="calculate-rules">
        <div class="calculate-content">
            <div class="computation-rule">
                <div class="label">
                    计算规则
                </div>

                <div class="editor">
                    <Editor v-model="state.calcRule"
                            :can-upload-video="false"
                    />
                </div>

                <div class="pt-50 flex w-full justify-center">
                    <SubmitBtn v-if="isNotPublished"
                               type="primary"
                               :loading="isSubmitLoading"
                               @click="onPublishBtnClick"
                    >
                        发布
                    </SubmitBtn>

                    <SubmitBtn v-if="isNotPublished"
                               type="primary"
                               :loading="isSubmitLoading"
                               @click="onSaveBtnClick"
                    >
                        保存
                    </SubmitBtn>

                    <el-button @click="onCancelBtnClick">
                        取消
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.calculate-rules {
    padding: 20px;
    background-color: white;
}
.label {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    margin-bottom: 20px;
}
</style>
